<!DOCTYPE html>
<style>
#test1 {
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-name: green;
}
#test2 {
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
#test3 {
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-name: notredorgreen;
}
@keyframes green {
    from {
      background-color: white;
    }
    to {
      background-color: green;
    }
}
@keyframes red {
    from {
      background-color: white;
    }
    to {
      background-color: red;
    }
}
</style>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script>
var test = async_test("Tests that an animation does not run when it specifies an incorrect name");
test1.addEventListener('animationstart', test.step_func(() => {
    test2.style.animationName = 'green';
}));
test2.addEventListener('animationstart', test.step_func_done(() => {}));
test3.addEventListener('animationstart', test.unreached_func("Should not run when it specifies an incorrect name"));
</script>
